import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Select } from 'antd'
import _ from 'loadsh'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'

const { Item } = Form
const { Option } = Select
export default class StepOneInput extends Component {
  state = {
    keyTitleMap: {},
    fileList: [],
    type: ''
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 改变利用人类型
  changeType (v) {
    this.setState({
      type: v
    }, () => {
      const c = this.props.formRef.current
      const vars = c.getFieldValue(['vars'])
      c.setFieldsValue({
        vars: {
          ...vars,
          applicant_diaodang_type: v
        }
      })
    })
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  render () {
    const { keyTitleMap } = this.state
    const typesList = this.props.dictionaries['调档申请利用人身份类型'] || []
    const useTypesList = this.props.dictionaries['调用申请利用方式'] || []
    return (
      <div>
        <Line>
          <Cell>
            <Item label='操作者'>
              <span>{this.props.userInfo.realname}</span>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item name={['vars', 'applicant_diaodang']} label={keyTitleMap.applicant_diaodang} rules={[{ required: true, message: `${keyTitleMap.applicant_diaodang}不能为空` }]}>
              <Input placeholder={`请输入${keyTitleMap.applicant_diaodang}`} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item name={['vars', 'applicant_diaodang_type']} label={keyTitleMap.applicant_diaodang_type} rules={[{ required: true, message: `请选择${keyTitleMap.applicant_diaodang_type}` }]}>
              <Select placeholder={`请选择${keyTitleMap.applicant_diaodang_type}`} onChange={e => this.changeType(e)}>
                {typesList.map(li => (
                  <Option key={li.title} value={li.title}>{li.title}</Option>
                ))}
              </Select>
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item name={['vars', 'applicant_diaodang_structure']} label={keyTitleMap.applicant_diaodang_structure} rules={[{ required: this.state.type === '其他单位', message: `${keyTitleMap.applicant_diaodang_structure}不能为空` }]}>
              <Input placeholder={`请输入${keyTitleMap.applicant_diaodang_structure}`} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item name={['vars', 'isfle']} label={keyTitleMap.isfle} rules={[{ required: true, message: `请选择${keyTitleMap.isfle}` }]}>
              <Select placeholder={`请选择${keyTitleMap.isfle}`}>
                <Option value='是'>是</Option>
                <Option value='否'>否</Option>
              </Select>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item name={['vars', 'fileno']} label={keyTitleMap.fileno}>
              <Input placeholder={`请输入${keyTitleMap.fileno}`} />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item name={['vars', 'file_usetype']} label={keyTitleMap.file_usetype} rules={[{ required: true, message: `${keyTitleMap.file_usetype}不能为空` }]}>
              <Select placeholder={`请选择${keyTitleMap.file_usetype}`}>
                {useTypesList.map(li => (
                  <Option key={li.title} value={li.title}>{li.title}</Option>
                ))}
              </Select>
            </Item>
          </Cell>
          <Split />
          <Cell style={{ width: '65%' }}>
            <Item name={['vars', 'file_usetype_remark']} label={keyTitleMap.file_usetype_remark} rules={[{ required: true, message: `${keyTitleMap.file_usetype_remark}不能为空` }]}>
              <Input placeholder={`请输入${keyTitleMap.file_usetype_remark}`} />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell style={{ width: '100%' }}>
            <Item name={['vars', 'file_purposes']} label={keyTitleMap.file_purposes} rules={[{ required: true, message: `${keyTitleMap.file_purposes}不能为空` }]}>
              <Input placeholder={`请输入${keyTitleMap.file_purposes}`} />
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

StepOneInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object,
  dictionaries: PropTypes.object
}

StepOneInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {},
  dictionaries: {}
}
